<template>
  <div class="tip gap-col-8">
    <div class="line gap-row-8">
      <Icon size="20" name="checkActive"></Icon>
      <i18n-t
        keypath="info.shopBuyRight.line1"
        tag="div"
        class="text-white font-size-14 font-style-normal font-weight-500 line-height-140 letter-spacing-dot2"
      >
        <template #nickname>
          <span class="text-primary">{{ content?.nickname }}</span>
        </template>
      </i18n-t>
    </div>
    <div class="line gap-row-8">
      <Icon size="20" name="checkActive"></Icon>
      <i18n-t
        keypath="info.shopBuyRight.line2"
        tag="div"
        class="text-white font-size-14 font-style-normal font-weight-500 line-height-140 letter-spacing-dot2"
      >
        <template #nickname>
          <span class="text-primary">{{ content?.nickname }}</span>
        </template>
      </i18n-t>
    </div>
    <div class="line gap-row-8">
      <Icon size="20" name="checkActive"></Icon>
      <i18n-t
        keypath="info.shopBuyRight.line3"
        tag="div"
        class="text-white font-size-14 font-style-normal font-weight-500 line-height-140 letter-spacing-dot2"
      >
        <template #collect>
          <span class="text-primary">{{ $t('info.shopBuyRight.collect') }}</span>
        </template>
      </i18n-t>
    </div>
    <div v-if="errMsg" class="text-end font-size-12 font-weight-400 line-height-120 text-primary-x">
      {{ errMsg }}
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { storeToRefs } from 'pinia'
import { usePopupDialogStore } from '@/store/popup-dialog.js'
import { useConfirmData } from '@/compositions/dialog/confirm-data'
import { useWindow } from '@/compositions/utils/window'

const { content } = storeToRefs(usePopupDialogStore())

const errMsg = ref('')

const { openWindow } = useWindow()

useConfirmData(() => {
  if (content.value.multiPay) return { amount: content.value.amount }
  const newWindow = openWindow()
  return { newWindow }
})
</script>

<style lang="scss" scoped>
.tip {
  display: flex;
  flex-direction: column;

  .input {
    height: 2.5rem;
    padding: 0.5rem 1rem;
    border-radius: 0.625rem;

    input {
      width: 100%;
      outline: none;
    }
  }
}
.line {
  display: flex;
  align-items: center;
  align-self: stretch;
}
</style>
